<template>
	<view>
		<view class="content">
			<view class="list">
				<view class="row" @click="uploadHeaderImg()">
					<view class="title">更换头像</view>
					<view class="right">
						<view class="tis">
							<image class="portrait" :src="userInfo.avatar || '/static/useCenter/no_header.png'"></image>
						</view>
						<view class="yticon icon-you"></view>
					</view>
				</view>
				<view class="row" >
					<view class="title">昵称</view>
					<view class="right">
						<input type="text" :value="userInfo.nickname"   @blur="nickInput" @confirm="nickInput"  class="tis"  style="text-align: right;"/>
						<view class="yticon icon-you"></view>
					</view>
				</view>
				<view class="row" @click="chooseSex()">
					<view class="title">性别</view>
					<view class="right">
						<view class="tis" v-if="userInfo.sex==0">未知</view>
						<view class="tis" v-else-if="userInfo.sex==1">男</view>
						<view class="tis" v-else>女</view>
						<view class="yticon icon-you"></view>
					</view>
				</view>
				<picker  mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="row">
						<view class="title">生日</view>
						<view class="right">
							<view class="tis">{{userInfo.birthday}}</view>
							<view class="yticon icon-you"></view>
						</view>
					</view>
				</picker>
			</view>
			<view class="list">
				<view class="row">
					<view class="title">真实姓名</view>
					<view class="right">
						<view class="tis colorD1">{{userInfo.name}}</view>
						<view class="yticon icon-you"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">所在企业</view>
					<view class="right">
						<view class="tis colorD1">{{userInfo.companyName}}</view>
						<view class="yticon icon-you"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}-${day}`;
	}
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				startDate:getDate('start'),
				endDate:getDate('end'),
				focus:false,
			};
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad(option) {
			
		},

		methods: {
			...mapMutations(['login']),
			// 选择头像
			uploadHeaderImg() {
				const {
					$test,
					$requestApi,
				} = this;
				let that = this;
				uni.showActionSheet({
					itemList: ['拍照', '从相片选择'],
					success: function(res) {
						if ((res.tapIndex + 1) == 1) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera'], //从拍照选择
								success: function(res) {
									var imageSrcFile = res.tempFilePaths[0];
									$test.upload($requestApi.upfils, {
										// files: [], // 仅5+App支持
										filePath: imageSrcFile, // 要上传文件资源的路径。
										name: 'upfile', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
										header: {},
										formData: {
											name: 'memeberEdit'
										},
									}).then(res => {
										that.$store.state.userInfo['avatar'] = JSON.parse(res.data).result.full_url;
										that.updateUserInfo();
									}).catch(err => {
										console.log( err.errMsg)
									})
								}
							});
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album'], //从相册选择
								success: function(res) {
									var imageSrcFile = res.tempFilePaths[0];
									$test.upload($requestApi.upfils, {
										// files: [], // 仅5+App支持
										filePath: imageSrcFile, // 要上传文件资源的路径。
										name: 'upfile', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
										header: {},
										formData: {
											name: 'memeberEdit'
										},
									}).then(res => {
										that.$store.state.userInfo['avatar'] = JSON.parse(res.data).result.full_url;
										that.updateUserInfo();
									}).catch(err => {
										console.log( err.errMsg)
									})
								}
							});
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			// 选择性别
			chooseSex() {
				let that = this;
				uni.showActionSheet({
					itemList: ['男', '女','未知'],
					success: function(res) {
						if ((res.tapIndex + 1) == 1) {
							that.$store.state.userInfo.sex = 1;
						} else if((res.tapIndex + 1) == 2) {
							that.$store.state.userInfo.sex = 2;
						}else{
							that.$store.state.userInfo.sex = 0;
						}
						that.updateUserInfo();
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			bindDateChange: function(e) {
				 this.$store.state.userInfo.birthday = e.target.value;
				this.updateUserInfo();
			},
			nickInput: function (e) {
				 this.$store.state.userInfo.nickname = e.detail.value;
				this.updateUserInfo();
			},
			
			// 加载基本信息
			updateUserInfo(){
				uni.showLoading({
				    title: '加载中'
				});
				const { login} = this;
				// let times;
				// console.log(this.$store.state.userInfo.birthday)
				// if( this.$store.state.userInfo.birthday===null|| this.$store.state.userInfo.birthday===''||!this.$store.state.userInfo.birthday){
				// 	times='';
				// }else{
				// 	console.log(this.$store.state.userInfo.birthday)
				// 	var time =  this.$store.state.userInfo.birthday.replace("-", "/").replace("-", "/");
				// 	console.log(time)
				// 	times = Date.parse(time);
				// }
				
				let objData = this.$store.state.userInfo
				this.$http.request({
					method: 'POST', // 请求方法必须大写
					url: this.$requestApi.modifyingUserInfo,
					data: objData
				})
				.then(result => {
					let _data = result.data;
					if (_data.code === 200) {
						uni.hideLoading();
						// objData['nickName'] = this.$store.state.userInfo.nickName;
						login({ ...objData});
					}
				})
				.catch(err => {
					console.log(err);
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.yticon {
		font-size: 30upx;

	}

	.content {
		padding-bottom: 20upx;

		.list {
			width: 100%;
			padding-left: 4%;
			background-color: #fff;
			margin-bottom: 20upx;

			.row {
				widows: 100%;
				padding-right: 20upx;
				min-height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: solid 1upx rgba(245,245,250,1);

				&:last-child {
					border-bottom: none;
				}
				.title {
					font-size: 30upx;
					color: #0B0E11;
				}

				.right {
					display: flex;
					align-items: center;
					color: #8E8E93;

					.tis {
						font-size: 30upx;
						margin-right: 5upx;
						max-height: 200upx;

						image {
							width: 155upx;
							height: 155upx;
							border-radius: 100%;
							margin: 10upx 0;
						}
					}

					.yticon {
						width: 40upx;
						color: rgba(209,209,214,1);
					}
				}

			}
		}
	}
</style>
